<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="主体名称"
          clearable
          v-model="params.customer_name"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="主营业务"
          clearable
          v-model="params.main_business"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <c-select placeholder="企业类型"
                  @change="getData()"
                  clearable
                  :options="enumCompanyType"
                  v-model="params['org_class.eq']"></c-select>
      </el-form-item> -->
      <el-form-item>
        <c-select
          placeholder="产业环节"
          clearable
          :options="[
            { value: '种繁' },
            { value: '饲料' },
            { value: '养殖' },
            { value: '屠宰' },
            { value: '加工' },
          ]"
          :props="{ value: 'value', label: 'value' }"
          @change="getData()"
          v-model="params.parent_main_business"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="级别"
          @change="getData()"
          clearable
          :options="enumCompanyLevel"
          v-model="params['lever_type.eq']"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" icon="el-icon-plus" @click="editCustomer()">
          新增
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="exportData"
          type="primary"
          icon="el-icon-download"
          :exportLoading="exportLoading"
        >
          导出
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="importDialog"
          icon="el-icon-upload2"
          type="primary"
          :exportLoading="exportLoading"
        >
          导入
        </el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:business="scope">
        <div class="text-truncate" :title="scope.row.main_business">
          {{ scope.row.main_business }}
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <new-industry-customer
      :visible.sync="editVisible"
      @success="getData(params.index)"
      :pageId="pageId"
      :pageName="pageName"
      :formData="formData"
      :tableId="tableId"
    ></new-industry-customer>

    <import-excel
      excel-template="/static/files/产业主体导入模板.xlsx"
      title="导入主体信息"
      :post-api="postUrl"
      :visible.sync="importVisible"
      @success="getData(params.index)"
    ></import-excel>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NewIndustryCustomer from '@/gov/views/category/NewIndustryCustomer'
import { enumCompanyType, enumCompanyLevel } from '@/gov/plugins/enum'
import SelectAddress from '@/components/select/SelectAddress'
import { exportExcel } from '@/credit/mixin/taskTableProvinceUnion'
import ImportExcel from '@/components/ImportExcel'
import { queryTrouble } from '@vimi/utils-api'
export default {
  components: {
    ImportExcel,
    SelectAddress,
    NewIndustryCustomer,
  },
  props: {
    pageId: String,
    pageName: String,
  },
  data() {
    return {
      enumCompanyType,
      enumCompanyLevel,
      params: {
        index: 1,
        size: 15,
        'submit_type.eq': 1,
      },
      order: {
        create_time: 'asc',
      },
      loading: false,
      tableName: 'datum_customer_info_warehouse',
      tableData: [],
      tableColumns: [
        { attrs: { label: '企业名称', prop: 'customer_name', minWidth: 110 } },
        { attrs: { label: '地址', prop: 'addressAll', minWidth: 150 } },
        { attrs: { label: '营业证号', prop: 'register_no' } },
        { attrs: { label: '企业类型', prop: 'orgClassLabel', align: 'center' } },
        // （种繁/育雏、饲料加工、养殖、屠宰加工、销售）
        { attrs: { label: '产业环节', prop: 'parent_main_business', align: 'center' } },
        { attrs: { label: '主营业务', prop: 'main_business' }, slot: 'business' },
        { attrs: { label: '产业规模(万羽、万吨)', prop: 'scale', align: 'center' } },
        { attrs: { label: '经营年限', prop: 'bussiness_years', align: 'center' } },
        // （县级/市级/省级/行业龙头企业）
        { attrs: { label: '级别', prop: 'leverLabel', align: 'center' } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        // { attrs: { label: '身份证号', prop: 'id_card' } },
        { attrs: { label: '联系电话', prop: 'mobile_no' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [{ content: '修改', icon: 'fa fa-edit', event: this.editCustomer }],
        },
      ],
      tableCount: 0,
      editVisible: false,
      tableId: '',
      formData: {},
      exportLoading: false,
      importVisible: false,
      postUrl: '',
    }
  },

  computed: {
    ...mapGetters(['user']),
    queryAddress() {
      return this.user.queryAddressCode
    },
  },

  created() {
    this.postUrl =
      '/api/credit/import/' +
      queryTrouble(
        this.tableName,
        {
          importKey: `${this.tableName}_template_ind`,
          'project_type_id.eq': this.pageId,
        },
        {},
        { dropTable: false }
      )
    this.params.address_code = this.queryAddress
    this.params['project_type_id.eq'] = this.pageId
    this.getData()
  },
  methods: {
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order || {})
      )
    },
    async getData(index = 1) {
      if (!this.pageId) {
        return
      }
      this.params.index = index
      this.loading = true
      const [res = {}] = await this.fetchData(this.params)
      const data = res.data || {}
      this.tableData = (data.data || []).map(this.dataAdapter)
      this.tableCount = data.totalCount || 0
      this.loading = false
    },
    editCustomer(row) {
      this.tableId = row ? row.datum_customer_info_warehouse_id : ''
      this.formData = row ? { ...row } : {}
      this.editVisible = true
    },
    dataAdapter(item) {
      item.addressAll = (item.address || '') + (item.address_detail || '')
      item.orgClassLabel = enumCompanyType[item.org_class]
      item.leverLabel = enumCompanyLevel[item.lever_type]
      return item
    },
    importDialog() {
      this.importVisible = true
    },
    async exportData() {
      this.exportLoading = true
      exportExcel({
        filename: this.pageName,
        tableColumns: this.tableColumns,
        params: this.params,
        dataAdapter: this.dataAdapter,
        fetchData: this.fetchData,
        onLoaded: () => {
          this.exportLoading = false
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
